<template>
<div class="admin">
    <!-- hello  -->

    <!-- nav -->
    <div class="nav">
        <!--         
        <el-radio-group v-model="isHideNavs" style="margin-bottom: 20px;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group> 
        -->
        <el-menu 
            default-active="1-4-1" 
            class="el-menu-vertical-demo" 
            @open="handleOpen" 
            @close="handleClose" 
            :collapse="isHideNavs"
            background-color="#263445"
            text-color="rgb(191, 203, 217)"
        >
        
            <el-submenu index="1">
                <template slot="title">
                    <i class="iconfont icon-icon_order"></i>
                    <span slot="title">XX管理</span>
                </template>

                <el-menu-item index="1-1">列表</el-menu-item>
                <el-menu-item index="1-2">添加</el-menu-item>
            </el-submenu>
            
            <el-submenu index="2">
                <template slot="title">
                    <i class="iconfont icon-shangpin"></i>
                    <span slot="title">XX管理</span>
                </template>

                <el-menu-item index="2-1">列表</el-menu-item>
                <el-menu-item index="2-2">添加</el-menu-item>
            </el-submenu>
            
            <el-submenu index="3">
                <template slot="title">
                    <i class="iconfont icon-quanxian"></i>
                    <span slot="title">XX管理</span>
                </template>

                <el-menu-item index="3-1">列表</el-menu-item>
                <el-menu-item index="3-2">添加</el-menu-item>
            </el-submenu>
            
        </el-menu>
    </div>
    <!-- /nav -->

    <!-- main -->
    <div class="main">
        <!-- 这边需要显示子路由数据 -->
        <router-view />
    </div>
    <!-- /main -->
</div>       
</template>   
<script>       
export default {
    data() {
        return {
            // 是否隐藏导航：true是，false否
            isHideNavs: false
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>
<style lang="scss" scoped>
// admin
.admin {
    width: 100%;
    height: 100%;
    background: #F0F2F5;
    overflow: hidden;
    
    // nav
    .nav {
        width: 200px;
        height:100%;
        // background: rgb(48, 65, 86);
        background: #263445;
        overflow: hidden;
        float:left;

        // font 
        .iconfont {
            display: inline-block;
            font-size: 20px;
            margin-right: 10px;
        }
    }

    // main
    .main {
        float:left;
        overflow: hidden;
    }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>